@import "../config.less";

@cls: @{perfix}-checkbox;

@keyframes CheckboxAnimatin {
    0% {
        transform: scale(1) rotate(45deg) translate(-4%, -9%);
    }
    50% {
        transform: scale(1.2) rotate(45deg) translate(-4%, -9%);
    }
    100% {
        transform: scale(1) rotate(45deg) translate(-4%, -9%);
    }
}


.@{cls} {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.@{cls}-input {
    width: 15px;
    height: 15px;
    border-radius: 2px;
    background: #fff;
    transition: background .3s ease-out;
}

.@{cls}-content {
    margin-left: 8px;
}

.@{cls}-unchecked {
    border-style: solid;
    border-width: 1px;
    border-color: #eaeaea;
    transition: border-color .5s ease, background .3s ease-out;
    background: #fff;

    &:hover {
        border-color: @primary-color;
        transition: border-color .5s ease;
    }
}

.@{cls}-halfcheck {
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
        content: ' ';
        width: 8px;
        height: 8px;
        background: @primary-color;

    }
}

.@{cls}-checked {
    background: @primary-color;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .5s ease, background .3s ease-out;
    border: 1px solid @primary-color;

    &::after {
        content: ' ';
        width: 4px;
        height: 7px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        animation: CheckboxAnimatin .2s ease-in-out forwards;
    }
}

.@{cls}-disabled {
    cursor: auto;
    color: rgba(0, 0, 0, .25);

    .@{cls}-input {
        border-color: #d9d9d9;
        background: #f5f5f5;
    }

    .@{cls}-checked {
        &::after {
            content: ' ';
            width: 4px;
            height: 7px;
            border: 2px solid #bbb;
            border-top: 0;
            border-left: 0;
            animation: CheckboxAnimatin .2s ease-in-out forwards;
        }
    }
}
